<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_绑定样式</title>
    <script src="../js/vue.js"></script>
    <style>
      .basic {
        width: 400px;
        height: 100px;
        border: 1px solid black;
      }

      .normal {
        background-color: skyblue;
      }

      .sad {
        width: 400px;
        height: 100px;
        border: 1px green dashed;
        background-color: grey;
      }

      .happy {
        border: 1px solid red;
        background-color: fuchsia;
      }

      .cty1 {
        background-color: fuchsia;
      }
      .cty2 {
        border-radius: 20px;
      }
      .cty1 {
        color: skyblue;
      }

    </style>
</head>
<body>
  <div id="root">
<!--    绑定样式的字符串写法 样式 场景:绑定一个随机的样式  -->
    <div class="basic" :class="mood" @click="changeMood"></div>
    <br> <br>
<!--    绑定样式的数组写法 场景: 绑定的样式数量不确定 名字也不确定-->
    <div class="basic" :class="classArr" @click="changeMood">你好，我是彭于晏</div>
<!--    可以将整个数组写在这里 但不建议 -->
<!--    <div class="basic" :class="['cty1','cty2','cty3']" @click="changeMood">你好，我是彭于晏</div>-->
    <br> <br>
<!--    绑定样式的对象写法 场景:样式的名字和数量都确定 用不用不确定 也可以直接绑定一个对象 不推荐麻烦-->
    <div class="basic" :class="classObj" @click="changeMood">你好，我是彭于晏</div>
    <br> <br>
<!--    绑定style样式 可以是一个对象也可以是一个数组-->
<!--    <div class="basic" :style="style">你好，我是彭于晏</div>-->
    <div class="basic" :style="styleArr">你好，我是彭于晏</div>

  </div>
  <script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;
    new Vue({
      el:'#root',
      data:{
        name:'cty',
        mood:'normal',
        classArr:['cty1','cty2','cty3'],
        classObj:{
          //这里的false是来控制 cty1 和 cty2 是否可以使用
          cty1:false,
          cty2:false
        },
        // style:{
        //     //必须符合驼峰式命名法
        //     backgroundColor:'blue',
        //     color:'green',
        //     fontSize:'40px'
        // }
        styleArr:[
            {
                backgroundColor:'green',
                fontSize:'20px',
            },
            {
                color:'red'
            }
        ]
      },
      methods:{
        changeMood() {
          //随机生成
          const arr = ['normal','happy','sad'];
          this.mood = arr[Math.floor(Math.random() * 3)];
        }
      }
    });
  </script>
</body>
</html>